<style>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
<template>
<div>
  	<Card class="mb-10">
    	<Row>
    		<Col span="12">
    			<h3>面试总结</h3>
    		</Col>
    		<Col span="12" class="text-right">
          <component2>
            <Button type="primary" @click='addItem'class="mr-10">新建</Button>
          </component2>
    		</Col>
    	</Row>
  	</Card>
     <Card>
		<Row style="margin-bottom: 10px;">
          <span>关键字：</span>
          <Input placeholder="请输入姓名" v-model.trim='searchText' style="width:200px;margin-right:20px;"></Input>
          <Button type="primary" @click='search'>搜索</Button>
		</Row>
        <Table size="large" stripes :columns="tableCol" :data="tableData">
        </Table>
        <Page class='mt-10 text-right' :total="total" :current='currentPage' :page-size='pageSize' @on-change="changePage" @on-page-size-change="changeSize" show-sizer show-total/>
    </Card>
    <Modal
      v-model="saveItem"
      :title="itemTitle"
      @on-cancel='closeSaveItem'>
      <Form ref="formData" :model="formData" :label-width="80">
        <input type="hidden" name='id' v-model="formData.id">
        <FormItem label="姓名">
            <Input v-model="formData.iname" placeholder="请填写您的姓名" :maxlength="10"></Input>
        </FormItem>
        <FormItem label="面试技术">
         <Row>
                <Col span="12" style="padding-right:10px">
                    <Select v-model="formData.iskill" filterable>
                        <Option v-for="item in cityList" :value="item.name" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </Col>
            </Row>
        </FormItem>
       <FormItem label="面试地区">
            <Input v-model="formData.idistrict" placeholder="请填写面试地区" :maxlength="10"></Input>
       </FormItem>
       <FormItem label="面试时长">
            <Input v-model="formData.iduration" placeholder="请填写面试时长" :maxlength="10"></Input>
       </FormItem>
       <FormItem label="面试时间">
            <Input v-model="formData.idatatime" placeholder="请填写面试时间" :maxlength="10"></Input>
       </FormItem>
       <FormItem label="面试情况">
            <Row>
                <Col span="12" style="padding-right:10px">
                    <Select v-model="formData.istatus" filterable>
                        <Option value="优秀">优秀</Option>
                        <Option value="良好">良好</Option>
                        <Option value="还行">还行</Option>
                    </Select>
                </Col>
            </Row>
       </FormItem>
       <FormItem label="面试内容">
            <Input v-model="formData.icontent" type="textarea" :autosize="{minRows: 1,maxRows: 6}" placeholder="请填写面试内容" ></Input>
       </FormItem>
       <FormItem label="备注">
            <Input v-model="formData.iremark" type="textarea" :autosize="{minRows: 1,maxRows: 6}" placeholder="请填写备注"></Input>
       </FormItem>
       <FormItem label="发布时间">
            <Input v-model="formData.insertdate"  placeholder="请填写发布时间"></Input>
       </FormItem>
       <FormItem label="修改时间">
            <Input v-model="formData.modifydate"  placeholder="请填写修改时间"></Input>
       </FormItem>
      </Form>
      <div slot="footer">
          <Button type="default"  @click="closeSaveItem">关闭</Button>
          <Button type="primary" :disabled='saveItemStatu'  @click="saveItemOk">确认</Button>
      </div>
    </Modal>
</div>
</template>
<script>
import { hasOneOf } from '@/libs/tools'
import { interviewTableData,insertInterviews,getInterviewsById,updateInterviews,delInterviews} from '@/api/data'
export default {
data(){
  return{
      id:"",
      searchText: '',	// 搜索内容初始化
      pageSize:10,
      currentPage:1,
      total:1, formData:{},      //表单信息
      addUser:true,   //是否为新增用户
      saveItem:false,     //保存操作框
      saveItemStatu:false,     //保存点击状态
      itemTitle:'新建面试',   //保存操作框title
      tableCol: [
        {
          title:'序号',
          type: 'index',
          width: 100,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'iname'
        },
        {
          title: '面试技术',
          key: 'iskill'
        },
        {
          title: '面试地区',
          key: 'idistrict'
        },
        {
          title: '面试时长',
          key: 'iduration'

        },
        {
          title: '面试时间',
          key: 'idatatime'
        },
        {
          title: '面试情况',
          key: 'istatus'
        },{
          title:'操作',
          key: 'action',
          width: 150,
          align: 'center',
          render:(h,params,row)=>{
            return h('div',[
              h('Button',{
                props:{
                  type:"primary",
                  size:'small'
                },
                style:{
                  marginRight:'10px'
                },
                on:{
                  click:()=>{
                   this.id=params.row.id.toString()
                    getInterviewsById(this.id).then(res=>{
                     if(res.data.success){
                      //  console.log(res.data.result.data.pageList[0])
                       this.formData=res.data.result.data.pageList[0]
                       this.itemTitle="编辑面试"
                       this.saveItem=true
                       this.addUser=false
                     }
                    })
                  }
                }
              },'编辑'),
              h('Button',{
                props:{
                  type:"error",
                  size:'small'
                },
                style:{
                  marginRight:'10px'
                },
                on:{
                  click :()=>{
                   this.id=params.row.id.toString()
                // 删除请求
                    delInterviews(this.id).then(res=>{
                      if(res.data.success){
                        this.$Message.success({
                           content:'删除用户成功'
                          });
                          this.pageInit()
                      }else if(res.data.errorMsg){
                        this.$Message.warning({
                       content:res.data.errorMsg
                      })
                      }
                    })
                  }
                }
              },'删除')
            ])
          }
        }
        ],
        tableData: [],
      cityList: [{id:1,
      name:"前端"
      },{
        id:2,
      name:"后端"
      }],
      targetKeys: []
  }
},methods: {
  //查询请求
async pageInit(){
      interviewTableData(this.pageSize,this.currentPage,this.searchText).then(res => {
        if(res.data.success){
          this.total = res.data.result.data.totalSize;
          this.tableData = res.data.result.data.pageList;
          console.log(this.tableData)
        }else if(res.data.errorMsg){
          this.$Message.warning({
            content:res.data.errorMsg
          })
        }
      })
    },
    changePage(page){
      this.currentPage = page;
      this.pageInit();
    },
    changeSize(size){
      this.pageSize = size;
      this.currentPage = 1;
      this.pageInit();
    },
    addItem(){
      this.formData = {};
      this.itemTitle = '添加面试';
      this.addUser = true;
      this.saveItem = true;
      if(this.cityList.length>=1){
        return;
      };},
      closeSaveItem(){
      this.formData = {};
      this.saveItem = false;
      this.targetKeys=[];
    },
    //表单验证
      saveItemOk(){
      var that = this;
      var formData = this.formData;
      console.log(JSON.stringify(formData))
      if(!formData.iname){
        this.$Message.warning({
          content:'请填写您的姓名！'
        });
        return;
      }else if (!/[\u4e00-\u9fa5_a-zA-Z]+$/.test(formData.iname)){
        this.$Message.warning({
          content:'请填写正确的姓名'
        });
        return;
      };
      if(!formData.iskill){
          this.$Message.warning({
            content:'请选择面试技术'
          });
          return;
        };
           if(!formData.idistrict){
          this.$Message.warning({
            content:'请输入面试地区'
          });
          return;
        };
        if(!formData.iduration){
          this.$Message.warning({
            content:'请输入面试时长'
          });
          return;
        };
        if(!formData.idatatime){
          this.$Message.warning({
            content:'请输入面试时间'
          });
          return;
        };
        if(!formData.istatus){
          this.$Message.warning({
            content:'请选择面试情况'
          });
          return;
        };
        if(!formData.icontent){
          this.$Message.warning({
            content:'请输入面试内容'
          });
          return;
        };
        ///判断是否为新增用户
        if(this.addUser){
          //发送增加一条请求
          insertInterviews(formData).then(res => {
           var that = this;
          that.saveItemStatu = false;
          if(res.data.success){
            this.$Message.success({
              content:'添加用户成功'
            });
            that.saveItem = false;
            that.pageInit();
          }else if(res.data.errorMsg){
            this.$Message.warning({
              content:res.data.errorMsg
            })
          }
        })
        }else{
          // 发送修改一条请求
          updateInterviews(formData).then(res=>{
             var that = this;
          that.saveItemStatu = false;
            if(res.data.success){
              this.$Message.success({
                    content:'修改用户成功'
                });
                that.saveItem = false;
                this.pageInit()
            }else if(res.data.errorMsg){
              this.$Message.warning({
                content:res.data.errorMsg
              })
            }
          })
        }

    },
    // 搜索功能
    search () {
      this.currentPage = 1;
  		this.pageInit();
  	},
    handleChange(newTargetKeys) {
        this.targetKeys = newTargetKeys;
    },
    render (item) {
        return item.label;
    },
    reloadMockData () {
        this.transfer = this.getMockData();
        this.targetKeys = this.getTargetKeys();
    }
},
mounted() {
  //初始化
     interviewTableData(10, 1).then(res => {
       console.log("----"+JSON.stringify(res));
      if(res.data.success){
        this.total = res.data.result.data.totalSize;
        this.tableData = res.data.result.data.pageList;

      }else if(res.data.errorMsg){
        this.$Message.warning({
          content:res.data.errorMsg
        })
      }
    })
},comments:{

}
}
</script>
